import { useEffect, useState } from "react";
import { Table, Button, Form, Input, Select, Modal, Cascader } from "antd";
import { HouseList, Getdel, buildinglist, HouseAdd, Getdelall, } from "../apis/house/index";
import "../assets/scss/house/house.scss";
// const { Option } = Select;
// const layout = {
//   labelCol: { span: 8 },
//   wrapperCol: { span: 16 },
// };

const Room = (): JSX.Element => {
  const [list, setlist] = useState();
  const [show, setShow] = useState(false);
  const findRoom = () => {
    setShow(!show);
  };
  //表格

  const columns: any = [
    {
      title: "房间id",
      dataIndex: "id",
    },
    {
      title: "楼号",
      dataIndex: "areas",
    },
    {
      title: "房间号",
      dataIndex: "houseno",
    },
    ,
    {
      title: "面积（平米）",
      dataIndex: "areas",
    },
    ,
    {
      title: "房间类型",
      dataIndex: "type",
    },
    ,
    {
      title: "朝向",
      dataIndex: "orientation",
    },
    {
      title: "操作",
      dataIndex: "id",
      render: (id: any) => (
        <div>
          <Button
            type="primary"
            style={{ marginLeft: "10px" }}
            onClick={() => {
              showModal(id);
            }}
          >
            编辑{" "}
          </Button>
          <Button
            type="primary"
            danger
            style={{ marginLeft: "10px" }}
            onClick={() => {
              delhouse(id);
            }}
          >
            删除
          </Button>
          ,
        </div>
      ),
    },
  ];
  //查询
  const onFinish = async (values: any) => {
    console.log("Success:", values);
    setroom({
      ...room,
      houseno: values.houseno,
      areas: values.areas,
      areas2: values.areas2,
      orientation: values.orientation,
      type: values.type,
      buildingid: values.buildingid,
    });
    HousesList();
  };

  //表格
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;

  const [room, setroom] = useState<any>({
    houseno: "",
    areas: "",
    areas2: "",
    orientation: "",
    type: "",
    buildingid: "",
    page: 1,
    psize: 10000,
  });
  // const [addroom, setaddroom] = useState({ id: 0, buildingid: 0, houseno: '', areas: '', type: '', orientation: '' })
  //列表
  const HousesList = async () => {
    const res: any = await HouseList(room);
    console.log(4444444444444, res);
    if (res.errCode == 10000) {
      setlist(res.data.list);
    }
  };
  //添加
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [id, setID] = useState(0);

  const showModal = (id: any) => {
    console.log(id);
    setIsModalOpen(true);
    setID(id);
    if (id > 0) {
    }
  };

  const handleOk = async (value: any) => {
    console.log(value);

    const res: any = await HouseAdd({
      buildingid: value.buildingid.pop(),
      houseno: value.houseno,
      areas: value.areas,
      ids: value.ids,
      type: value.type.pop() + value.typeone.pop(),
      orientation: value.orientation.pop(),
      id,
    });
    console.log(9999999999, res);
    if (res.errCode == 10000) {
      setIsModalOpen(false);
      HousesList();
    }
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //级联框
  const onChange = (value: any) => {
    console.log(value);
  };

  //楼栋
  const [residences, setResidences] = useState<any>([]);
  const BuildingList = async () => {
    const res: any = await buildinglist(room);
    console.log(888888888888888, res);
    if (res.errCode == 10000) {
      setResidences(res.data.list);
    }
  };

  const genre = [
    {
      value: "1室",
      label: "1室",
    },
    {
      value: "2室",
      label: "2室",
    },
    {
      value: "3室",
      label: "3室",
    },
    {
      value: "4室",
      label: "4室",
    },
  ];
  const genres = [
    {
      value: "1厅",
      label: "1厅",
    },
    {
      value: "2厅",
      label: "2厅",
    },
    {
      value: "3厅",
      label: "3厅",
    },
    {
      value: "4厅",
      label: "4厅",
    },
  ];
  const orientation: any = [
    {
      value: "朝东",
      label: "朝东",
    },
    {
      value: "朝西",
      label: "朝西",
    },
    {
      value: "朝南",
      label: "朝南",
    },
    {
      value: "朝北",
      label: "朝北",
    },
  ];
  //删除
  const delhouse = async (e: any) => {
    const res: any = await Getdel({ id: e });
    // console.log(888888888888888, res);
    if (res.errCode == 10000) {
      HousesList();
    }
  };
  //批量删除
  const arrDelHouse = async () => {
    const res: any = await Getdelall({ ids: selectedRowKeys });
    console.log(888888888888888, res);
    HousesList();
  };
  useEffect(() => {
    HousesList();
    BuildingList();
  }, []);
  return (
    <div>
      <div>
        <div
          className="textinfo"
          style={{ padding: "10px", color: "#4180f3" }}>房间列表</div>
        <div
          style={{ width: "100%", backgroundColor: "#f3f3f3", padding: "10px", border: "1px solid rgba(0, 0, 0, 0.1)" }}
          onClick={() => {
            findRoom();
          }}
        >
          房屋查询
        </div>
        {show === true && (
          <div style={{ width: "100%", border: "1px solid #e4e4e4" }}>
            <Form
              name="basic"
              wrapperCol={{ span: 16 }}
              style={{
                display: "flex",
                padding: "10px 0 0 10px",
                margin: "0 0 0 10px",
              }}
              initialValues={{ remember: true }}
              onFinish={onFinish}
              autoComplete="off"
            >
              <Form.Item label="楼栋ID：" name="buildingid">
                <Input />
              </Form.Item>
              <Form.Item label="房间号：" name="houseno">
                <Input />
              </Form.Item>
              <Form.Item label="房间类型：" name="type">
                <Input />
              </Form.Item>
              <Form.Item label="房屋面积范围" name="areas">
                <Input />
              </Form.Item>
              <Form.Item label="房屋面积范围" name="areas2">
                <Input />
              </Form.Item>
              <Form.Item label="房间朝向：" style={{ width: "180px" }}>
                <Select>
                  <Select.Option value="demo">朝东</Select.Option>
                  <Select.Option value="demo">朝西</Select.Option>
                  <Select.Option value="demo">朝南</Select.Option>
                  <Select.Option value="demo">朝北</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </Form.Item>
            </Form>
          </div>
        )}
      </div>
      <div
        style={{
          width: "100%",
          backgroundColor: "#f3f3f3",
          padding: "10px",
          border: "1px solid #fff",


        }}
      >
        <div className="list">
          <span>数据列表</span>
          <Button
            type="primary"
            style={{ marginLeft: "10px" }}
            onClick={() => {
              showModal(0);
            }}
          >
            添加
          </Button>

          <Button
            type="primary"
            danger
            onClick={arrDelHouse}
            style={{
              marginLeft: "10px",
            }}
          >
            批量删除
          </Button>
        </div>
      </div>

      <Modal
        className="model"
        title={id == 0 ? <div>添加房屋</div> : <div>编辑房屋</div>}
        open={isModalOpen}
        onCancel={handleCancel}
        onOk={handleOk}
        footer={null}
      >
        <div>
          <Form
            name="basic"
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={handleOk}
            autoComplete="off"
          >
            <Form.Item name="buildingid" label="楼栋id">
              <Cascader
                fieldNames={{ label: "name", value: "id" }}
                options={residences}
              />
            </Form.Item>
            <Form.Item
              label="房间号"
              name="houseno"
              rules={[{ required: true, message: "请选择!" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="房间面积（平米）"
              name="areas"
              rules={[{ required: true, message: "请选择!" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="房间类型"
              name="type"
              //  rules={[{ required: true, message: 'Please input your username!' }]}
              style={{ display: "flex" }}
            >
              <Cascader
                style={{ width: "150px" }}
                options={genre}
                onChange={onChange}
                placeholder="请选择"
              />
              {/* <Cascader style={{ width: '150px' }} options={genres} onChange={onChange} placeholder="请选择" /> */}
            </Form.Item>
            <Form.Item
              label="房间类型"
              name="typeone"
              // rules={[{ required: true, message: 'Please input your username!' }]}
              style={{ display: "flex" }}
            >
              {/* <Cascader style={{ width: '150px' }} options={genre} onChange={onChange} placeholder="请选择" /> */}
              <Cascader
                style={{ width: "150px" }}
                options={genres}
                onChange={onChange}
                placeholder="请选择"
              />
            </Form.Item>
            <Form.Item
              label="朝向"
              name="orientation"
              rules={[{ required: true, message: "请选择!" }]}
            >
              <Cascader
                options={orientation}
                onChange={onChange}
                placeholder="请选择"
              />
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button className="submit" htmlType="submit">
                添加
              </Button>
              <Button className="cancel" onClick={() => handleCancel()}>
                取消
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Modal>
      <div>
        <div style={{ marginBottom: 16 }}>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ""}
          </span>
        </div>
        <Table
          className="page"
          rowSelection={rowSelection}
          bordered
          columns={columns}
          dataSource={list}
          rowKey={(columns) => columns.id}
        />
      </div>
    </div>
  );
};
export default Room;
